<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-family: 'Source Sans Pro', Arial, sans-serif;
            background: #becccc;
            text-transform: uppercase;
            color: #fff;
            text-align: center;
            letter-spacing: -3px;
            padding: 50px;
        }

        h2 {
            font-size: 100px;
            position: relative;

            text-shadow: 0 1px 0 hsl(174, 5%, 80%),
            0 2px 0 hsl(174, 5%, 75%),
            0 3px 0 hsl(174, 5%, 70%),
            0 4px 0 hsl(174, 5%, 66%),
            0 5px 0 hsl(174, 5%, 64%),
            0 6px 0 hsl(174, 5%, 62%),
            0 7px 0 hsl(174, 5%, 61%),
            0 8px 0 hsl(174, 5%, 60%),
            0 0 5px rgba(0, 0, 0, .05),
            0 1px 3px rgba(0, 0, 0, .2),
            0 3px 5px rgba(0, 0, 0, .2),
            0 5px 10px rgba(0, 0, 0, .2),
            0 10px 10px rgba(0, 0, 0, .2),
            0 20px 20px rgba(0, 0, 0, .3);
        }

        /*
        text-shadow originated from: https://codepen.io/zitrusfrisch
        */
        .superShadow {
            text-shadow: 0 1px 0 hsl(174, 5%, 80%),
            0 2px 0 hsl(174, 5%, 75%),
            0 3px 0 hsl(174, 5%, 70%),
            0 4px 0 hsl(174, 5%, 66%),
            0 5px 0 hsl(174, 5%, 64%),
            0 6px 0 hsl(174, 5%, 62%),
            0 7px 0 hsl(174, 5%, 61%),
            0 8px 0 hsl(174, 5%, 60%),
            0 0 5px rgba(0, 0, 0, .05),
            0 1px 3px rgba(0, 0, 0, .2),
            0 3px 5px rgba(0, 0, 0, .2),
            0 5px 10px rgba(0, 0, 0, .2),
            0 10px 10px rgba(0, 0, 0, .2),
            0 20px 20px rgba(0, 0, 0, .3);
        }

        strong {
            font-size: 200px;
        }
    </style>
</head>
<body>
<h2>3d text</h2>
<h2>animated</h2>
<h2>with multiple</h2>
<h2>text-shadows</h2>

<!-- 引入 GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
    // var tl = gsap.timeline({
    //     repeat: 6,
    //     repeatDelay: 1,
    //     yoyo: true
    // });
    // tl.to("h2", {
    //     duration: 0.2,
    //     className: "+=superShadow",
    //     top: "-=10px",
    //     ease: "power1.in",
    //     stagger: 0.3
    // }, "start")
</script>
</body>
</html>